<template>
  <div>
    <el-button v-if="canCancel" type="danger" @click="cancel">取消订单</el-button>

    <el-button
      v-if="orderState.name === $CONST.ORDER_STATUS.CREATE.name"
      type="success"
      @click="pay">支付</el-button>

    <el-button
      v-if="orderState.name === $CONST.ORDER_STATUS.DELIVERED.name"
      type="success"
      @click="sign">签收</el-button>

    <el-card v-if="showDialog" style="margin-top:20px;">
      <div slot="header" class="clearfix">
        <span>订单支付</span>
      </div>
      <el-form label-width="100px">
        <el-form-item label="支付金额">
          {{ amount.toFixed(2) }} 元
        </el-form-item>
        <el-form-item label="支付方式">
          <payment-view ref="paymentVew" :accountBalance="photoStudio.amount" :offLineAccountBalance="photoStudio.offLineAmount"
            :payType="'AccountBalance'" :usePayTypes="['AccountBalance', 'FactoryCoin']" businessType="order" @paid-finished="paidFinished($event)" :totalAmount="amount" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="doPay">确认支付</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import orderApi from '@/api/order'
import PaymentView from '@/components/payment/paymentView'
import photoStudioApi from '@/api/photoStudio'
export default {
  props: {
    orderId: Number,
    amount: {
      type: Number,
      default: 0
    },
    orderState: Object,
    default: () => this.$CONST.ORDER_STATUS.CREATE
  },
  components: {
    PaymentView
  },
  data () {
    return {
      showDialog: false,
      photoStudio: null
    }
  },
  computed: {
    canCancel () {
      return (
        this.orderState.name === this.$CONST.ORDER_STATUS.CREATE.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.READY_PAY.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.PAID.name ||
        this.orderState.name === this.$CONST.ORDER_STATUS.CONFIRM.name
      )
    }
  },
  methods: {
    pay () {
      this.showDialog = true
    },
    doPay () {
      this.$refs.paymentVew.startPayment(this.orderId)
    },
    paidFinished (event) {
      this.showDialog = false
      if (event.success) {
        this.$emit('onSuccess')
      } else {
        this.$alert(`未完成支付：${event.message}。`, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$emit('onSuccess')
          }
        })
      }
    },
    sign () {
      this.$confirm('确定签收吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi.sign(this.orderId).then((res) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    },
    cancel () {
      this.$prompt(
        '确定取消订单吗?请填写取消原因',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '原因'
        }
      ).then(({ value }) => {
        orderApi.cancel(this.orderId, value).then((data) => {
          this.$message.success('提交成功')
          this.$emit('onSuccess')
        })
      })
    },
    /**
     * 获取当前影楼信息
     */
    getPhotoStudio () {
      photoStudioApi.getStudio().then(response => {
        this.photoStudio = response.data
      })
    }
  },
  mounted () {
    if (this.orderState.name === this.$CONST.ORDER_STATUS.CREATE.name) {
      this.getPhotoStudio()
    }
  }
}
</script>

<style>
</style>
